import { Alert, Checkbox } from 'antd';
import React, { useState,useEffect} from 'react';
import { Link, connect, Dispatch } from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';
import LoginForm from './components/Login';

import styles from './style.less';

const { UserName, Password, Submit,Captcha } = LoginForm;

interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string|undefined;
}> = ({ content }) => (
  <Alert
    style={{
      marginTop: 20,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC<LoginProps> = (props) => {
  const { userLogin = {}, submitting } = props;
  const [type, setType] = useState<string>('account');


  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
  };
  return (
    <div className={styles.main}>
      { userLogin.statusCode === 500 && !submitting ?
        <LoginMessage content={userLogin.statusMsg}/> : null
      }
      <LoginForm activeKey={type} onSubmit={handleSubmit} >
          <UserName
            name="username"
            placeholder="请输入用户名"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
            style={{marginTop:'20px'}}
          />
          <Password
            name="password"
            placeholder="请输入登录密码"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
          {/* <Captcha name="captcha"
            placeholder="请输入验证码"
            rules={[
              {
                required: true,
                message: '请输入验证码！',
              },
          ]}/> */}
        <Submit loading={submitting}>登录</Submit>
      </LoginForm>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
